﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>>jquery制作仿淘宝产品展示鼠标悬停放大显示产品-xw素材网</title>
    <link href="css/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
            font-family: Arial;
        }
        a img, :link img, :visited img
        {
            border: none;
        }
        table
        {
            border-collapse: collapse;
            border-spacing: 0;
        }
        :focus
        {
            outline: none;
        }
        *
        {
            margin: 0;
            padding: 0;
        }
        p, blockquote, dd, dt
        {
            margin: 0 0 8px 0;
            line-height: 1.5em;
        }
        fieldset
        {
            padding: 0px;
            padding-left: 7px;
            padding-right: 7px;
            padding-bottom: 7px;
        }
        fieldset legend
        {
            margin-left: 15px;
            padding-left: 3px;
            padding-right: 3px;
            color: #333;
        }
        dl dd
        {
            margin: 0px;
        }
        dl dt
        {
        }
        .clearfix:after
        {
            clear: both;
            content: ".";
            display: block;
            font-size: 0;
            height: 0;
            line-height: 0;
            visibility: hidden;
        }
        .clearfix
        {
            display: block;
            zoom: 1;
        }
        ul#thumblist
        {
            display: block;
        }
        ul#thumblist li
        {
            float: left;
            margin-right: 2px;
            list-style: none;
        }
        ul#thumblist li a
        {
            display: block;
            border: 1px solid #CCC;
        }
        ul#thumblist li a.zoomThumbActive
        {
            border: 1px solid red;
        }
        .jqzoom
        {
            text-decoration: none;
            float: left;
        }
    </style>
</head>
<body>
    
    <div class="clearfix" id="content" style="margin-top: 100px; margin-left: 350px;
        height: 500px; width: 500px;">
        <h1>效果一</h1>
        <div class="clearfix">
            <a href="images/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" id="jqzoom1">
                <img src="images/triumph_small1.jpg" title="triumph" style="border: 4px solid #666;">
            </a>
        </div>
        <br />
        <div class="clearfix">
            <ul id="thumblist" class="clearfix">
                <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/triumph_small1.jpg',largeimage: 'images/triumph_big1.jpg'}">
                    <img src='images/triumph_thumb1.jpg'></a></li>
                <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/triumph_small2.jpg',largeimage: 'images/triumph_big2.jpg'}">
                    <img src='images/triumph_thumb2.jpg'></a></li>
                <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/triumph_small3.jpg',largeimage: 'images/triumph_big3.jpg'}">
                    <img src='images/triumph_thumb3.jpg'></a></li>
            </ul>
        </div>
    </div>

    <div class="clearfix" id="content1" style="margin-top: 100px; margin-left: 350px;
        height: 500px; width: 500px;">
        <h1>效果二</h1>
        <div class="clearfix">
            <a href="images/triumph_big1.jpg" class="jqzoom" rel='2gal1' title="triumph" id="jqzoom2">
                <img src="images/triumph_small1.jpg" title="triumph" style="border: 4px solid #666;">
            </a>
        </div>
        <br />
        <div class="clearfix">
            <ul id="thumblist" class="clearfix">
                <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: '2gal1', smallimage: 'images/triumph_small1.jpg',largeimage: 'images/triumph_big1.jpg'}">
                    <img src='images/triumph_thumb1.jpg'></a></li>
                <li><a href='javascript:void(0);' rel="{gallery: '2gal1', smallimage: 'images/triumph_small2.jpg',largeimage: 'images/triumph_big2.jpg'}">
                    <img src='images/triumph_thumb2.jpg'></a></li>
                <li><a href='javascript:void(0);' rel="{gallery: '2gal1', smallimage: 'images/triumph_small3.jpg',largeimage: 'images/triumph_big3.jpg'}">
                    <img src='images/triumph_thumb3.jpg'></a></li>
            </ul>
        </div>
    </div>

</body>
<div style=" width:600px;margin:0 auto; text-align:center; font-size:12px;">
<p>由xw素材网整理，查看更多特效：【<a href="http://www.xwcms.net/" target="_blank"><font color="#000000">xw素材网</font></a>】</p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流</p>
</div>
<script src="js/jquery-1.6.js" type="text/javascript"></script>
<script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#jqzoom1').jqzoom({
            zoomType: 'standard',
            lens: true,
            preloadImages: false,
            alwaysOn: true
        });


        $('#jqzoom2').jqzoom({
            zoomType: 'reverse',
            lens: true,
            preloadImages: false,
            alwaysOn: false
        });

    });


</script>
</html>
